<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hive元数据监控系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f0f2f5;
            color: #333;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 40px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 24px;
            font-weight: 600;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        
        .card-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .card-value {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .card-trend {
            font-size: 13px;
            color: #52c41a;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-running {
            background: #52c41a;
        }
        
        .status-stopped {
            background: #f5222d;
        }
        
        .section {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e8e8e8;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            text-align: left;
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        th {
            background: #fafafa;
            font-weight: 600;
            color: #666;
        }
        
        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-critical {
            background: #fff1f0;
            color: #f5222d;
        }
        
        .badge-severe {
            background: #fff7e6;
            color: #fa8c16;
        }
        
        .badge-warning {
            background: #fffbe6;
            color: #faad14;
        }
        
        .badge-info {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: #1890ff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🔍 Hive元数据监控系统 - 监控大屏</h1>
    </div>
    
    <div class="container">
        <!-- 统计卡片 -->
        <div class="dashboard">
            <div class="card">
                <div class="card-title">监控状态</div>
                <div class="card-value">
                    <span class="status-indicator status-running" id="statusIndicator"></span>
                    <span id="statusText">加载中...</span>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">监控数据库数</div>
                <div class="card-value" id="dbCount">-</div>
            </div>
            
            <div class="card">
                <div class="card-title">监控表数</div>
                <div class="card-value" id="tableCount">-</div>
            </div>
            
            <div class="card">
                <div class="card-title">今日告警</div>
                <div class="card-value" id="todayAlerts">-</div>
                <div class="card-trend" id="alertTrend">-</div>
            </div>
            
            <div class="card">
                <div class="card-title">未解决告警</div>
                <div class="card-value" id="unresolvedAlerts">-</div>
            </div>
        </div>
        
        <!-- 最近告警 -->
        <div class="section">
            <div class="section-title">
                最近告警
                <button class="btn btn-primary" style="float: right;" onclick="window.location.href='/alerts'">
                    查看全部
                </button>
            </div>
            <div id="alertsTable" class="loading">加载中...</div>
        </div>
        
        <!-- 告警统计 -->
        <div class="section">
            <div class="section-title">告警统计（最近7天）</div>
            <div id="statsTable" class="loading">加载中...</div>
        </div>
    </div>
    
    <script>
        // 加载状态
        async function loadStatus() {
            try {
                const response = await fetch('/api/status');
                const result = await response.json();
                
                if (result.success) {
                    const data = result.data;
                    
                    // 更新监控状态
                    const running = data.monitor_engine.running;
                    document.getElementById('statusIndicator').className = 
                        `status-indicator ${running ? 'status-running' : 'status-stopped'}`;
                    document.getElementById('statusText').textContent = 
                        running ? '运行中' : '已停止';
                    
                    // 更新统计数据
                    document.getElementById('dbCount').textContent = 
                        data.monitor_engine.databases_count || 0;
                    document.getElementById('tableCount').textContent = 
                        data.monitor_engine.tables_count || 0;
                    
                    // 更新告警统计
                    const stats = data.alert_statistics;
                    document.getElementById('todayAlerts').textContent = 
                        stats.total_count || 0;
                    document.getElementById('unresolvedAlerts').textContent = 
                        stats.unresolved_count || 0;
                }
            } catch (error) {
                console.error('加载状态失败:', error);
            }
        }
        
        // 加载最近告警
        async function loadRecentAlerts() {
            try {
                const response = await fetch('/api/alerts?limit=10');
                const result = await response.json();
                
                if (result.success && result.data.alerts.length > 0) {
                    const alerts = result.data.alerts;
                    
                    const html = `
                        <table>
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>级别</th>
                                    <th>类型</th>
                                    <th>数据库</th>
                                    <th>表</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${alerts.map(alert => `
                                    <tr>
                                        <td>${new Date(alert.alert_time).toLocaleString('zh-CN')}</td>
                                        <td><span class="badge badge-${alert.alert_level}">${alert.alert_level}</span></td>
                                        <td>${alert.alert_type}</td>
                                        <td>${alert.database_name || '-'}</td>
                                        <td>${alert.table_name || '-'}</td>
                                        <td>${alert.resolved ? '✓ 已解决' : '待处理'}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    
                    document.getElementById('alertsTable').innerHTML = html;
                } else {
                    document.getElementById('alertsTable').innerHTML = 
                        '<div class="loading">暂无告警</div>';
                }
            } catch (error) {
                console.error('加载告警失败:', error);
                document.getElementById('alertsTable').innerHTML = 
                    '<div class="loading">加载失败</div>';
            }
        }
        
        // 加载统计信息
        async function loadStatistics() {
            try {
                const response = await fetch('/api/alerts/statistics?days=7');
                const result = await response.json();
                
                if (result.success) {
                    const stats = result.data;
                    
                    const html = `
                        <table>
                            <tr>
                                <th>告警级别</th>
                                <th>数量</th>
                            </tr>
                            ${Object.entries(stats.level_stats || {}).map(([level, count]) => `
                                <tr>
                                    <td><span class="badge badge-${level}">${level}</span></td>
                                    <td>${count}</td>
                                </tr>
                            `).join('')}
                            <tr>
                                <td><strong>总计</strong></td>
                                <td><strong>${stats.total_count}</strong></td>
                            </tr>
                        </table>
                    `;
                    
                    document.getElementById('statsTable').innerHTML = html;
                }
            } catch (error) {
                console.error('加载统计失败:', error);
            }
        }
        
        // 初始化
        loadStatus();
        loadRecentAlerts();
        loadStatistics();
        
        // 定期刷新
        setInterval(() => {
            loadStatus();
            loadRecentAlerts();
        }, 30000);  // 每30秒刷新一次
    </script>
</body>
</html>

